<template>
    <div class="time-box">
        <!-- 动态时间组件 -->
        {{time}}
    </div>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue"
const time = ref()
let timer = null
onMounted(()=>{
    timer = setInterval(() => {
        //设置定时器
        nowFormatDate(); //自定义事件
    }, 1000)
})
onBeforeUnmount(()=>{
    clearInterval(timer); //清除定时器
    timer = 0;
})
var padaDate = function(value){
  return value<10 ? '0'+value : value;
}
const nowFormatDate = ()=>{
    let date = new Date()
    let year=date.getFullYear();
    let month=padaDate(date.getMonth()+1);
    let day=padaDate(date.getDate());
    let h=padaDate(date.getHours());
    let m=padaDate(date.getMinutes());
    let s=padaDate(date.getSeconds());
    let week=date.getDay();
    let str="星期"
    switch (week) {  
        case 0 :  
            str += "日";  
            break;  
        case 1 :  
            str += "一";  
            break;  
        case 2 :  
            str += "二";  
            break;  
        case 3 :  
            str += "三";  
            break;  
        case 4 :  
            str += "四";  
            break;  
        case 5 :  
            str += "五";  
            break;  
        case 6 :  
            str += "六";  
            break;  
    }  
    let d=`${year}年 ${month}月 ${day}日 ${h}:${m}:${s} ${str}`;
    time.value = d
}
</script>

<style scoped>
.time-box{
    width: 300px;
    height: 40px;
    line-height: 40px;
    color: skyblue;
    font-size: 16px;
}

</style>